<template>
 <div class="top-wrapper">
     <div @click="toDetail" class="content-item" v-for="(item,indsex) in contentList">
       <div class="item-status " :class="item.status==1?'item-status-1':item.status==0?'item-status-0':''" >{{item.status==1?'预约成功':item.status==0?'待确认':'拒绝预约'}}</div>
       <div class="item">
           <span  class="title">被访部门:</span>
           <span  class="content">{{item.department}}</span>
       </div>
       <div class="item">
           <span  class="title">被访者姓名:</span>
           <span  class="content">{{item.name}}</span>
       </div>
       <div class="item">
           <span  class="title">到访时间:</span>
           <span  class="content">{{item.time}}</span>
       </div>
       <div class="item">
           <span  class="title">到访事由:</span>
           <span  class="content">{{item.for}}</span>
       </div>
     </div>
 </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
export default {
  name: "Index",
  data() {
    return {
      contentList: [
        {
          department: "智慧城市",
          name: "张三",
          time: "2018-07-20 12:40:50",
          for: "参加面试",
          status:1
        },
         {
          department: "智慧城市",
          name: "李四",
          time: "2018-07-20 12:40:50",
          for: "参加面试",
          status:0        },
         {
          department: "智慧城市",
          name: "万勿",
          time: "2018-07-20 12:40:50",
          for: "参加面试",
          status:-1
        }
      ]
    };
  },
  methods: {
    toDetail(){
      this.$router.push({
        path:"/detail"
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top-wrapper{
   position: absolute;
    top:0;
    width: 100%;
    padding-top: 20px;
    background: rgb(245, 245, 245);
    bottom: 0;
}
.content-item {
  position: relative;
  padding: 10px;
    margin:0 20px;
  background: white;
  border-radius: 6px;
  margin-bottom: 10px;
}
.item {
  position: relative;
  height: 30px;
  line-height: 30px;
  color: gray;
  font-size: 15px;
}

.title {
  padding: relative;
  padding-left:8px;
    padding-right:6px;
}
.content {
  color: rgb(60,60,60);
}

.item-status{
  position: absolute;
  height: 16px;
  line-height: 16px;
  right: 0;
  top: 15px;
  padding: 4px 18px;
  font-size: 13px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background: rgb(245, 118, 118);
  color: white;
}

.item-status-0{
   background: rgb(61, 136, 248);
}
.item-status-1{
   background: rgb(140,205,76);
}
</style>
